<template>
  <div class="allpage">
    <el-form :inline="true" :model="formInline" ref="formInline" class="form-style">
      <el-row style="border-bottom:1px solid #eeeeee">
        <el-col :span="5">
          <el-form-item prop="name" style="margin:15px 10px">
        <el-input v-model="formInline.name" placeholder="供应商名称"></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="6">
      <el-form-item style="margin:15px 10px">
        <el-date-picker
          type="date"
          v-model="formInline.time"
          @change="getSTime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
        </el-col>
        <el-col :span="7">
      <el-form-item prop="region" label="状态：" style="margin:15px 10px">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="6">
      <el-form-item style="margin:15px 10px">
        <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button type="success" size="medium" @click="addgm" style="margin:10px 0 10px 30px">新增供应商</el-button>
        </el-col>
      </el-row>
    </el-form>
      
    <div class="table-style">
      <el-table :data="tableData" border >
        <el-table-column prop="SupplierId" label="编号" width="80"></el-table-column>
        <el-table-column prop="SupplierName" label="供应商名称" width="140"></el-table-column>
        <el-table-column prop="band" label="开户银行">
          --
          <!-- <template slot-scope="scope">
              <p v-show="scope.row.State === 'on'">{{scope.row.band}}</p>
              <p v-show="scope.row.State === 'off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column label="持卡人">
          --
          <!-- <template slot-scope="scope">
              <p v-show="scope.row.State === 'on'">{{scope.row.UserName}}</p>
              <p v-show="scope.row.State === 'off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column label="银行卡号">
          --
          <!-- <template slot-scope="scope">
              <p v-show="scope.row.State === 'on'">{{scope.row.bandno}}</p>
              <p v-show="scope.row.State === 'off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column prop="SupplierAddress" label="供应商地址" width="200"></el-table-column>
        <el-table-column prop="date" label="状态" width="100">--</el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"></el-table-column>
        <el-table-column prop="action" label="操作" width="200">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="warning" size="mini" @click="del(scope.row)">冻结</el-button>
              <!-- SupplierId 删除 -->
            </div>
            <!-- <div v-show="scope.row.State ==='off'">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini">解冻</el-button>
            </div>-->
          </template>
        </el-table-column>
      </el-table>
      <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
    
    <gmon-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :formData="formInline"
    />
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import GmonDialog from "./children/GmonDialog";
import { LoadSuppliers, DeleteSupplier, AddSupplier } from "@/request/api";
export default {
  components: {
    Botpage,
    GmonDialog,
  },
  created() {
    this.getTableDatas();
  },
  methods: {
    getTableDatas() {
      LoadSuppliers({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        CustomerId: 1,
        SreachValues: this.formInline.name,
      })
        .then((res) => {
           if (res.StatusCode === 200) {
          this.dialogFormVisible = false;
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for ( let i in this.tableData ) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-');
          }
           }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSTime(val) {
      this.formInline.time = val;
    },

    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableDatas();
      }
    },
    addgm() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增供应商";
      this.formInline = {};
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas()
    },
    del(row) {
      if (row.SupplierId) {
        this.$confirm("是否要删除该条信息?", "删除提示", {}).then((res) => {
          DeleteSupplier({
            SupplierId: row.SupplierId,
          }).then((res) => {
            if (res.Message) {
              this.getTableDatas();
              this.$confirm("该条信息删除成功！", "删除成功", {});
            }
          });
        });
      }
    },
    edit(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.formInline = row;
    },
    search() {
      this.getTableDatas();
    },
  },
  data() {
    return {
      formInline: {},
      currentPage: 1,
      PageSize: 10,
      total: 1,
      dialogTitle: "",
      dialogFormVisible: false,
      tableData: [],
      options:[
        {label:"全部",value:1},
        {label:"正常",value:2},
        {label:"冻结",value:3},
      ]
    };
  },
};
</script>

<style lang="less" scoped>
</style>